<template>
  <div class="btn"
   @click="btn"
   
   :class="{
       primary:type==='primary',
           danger:type==='danger'
       
       
       }"
  
  
  >
  <!--    :class动态绑定给父组件用传过去 -->
      <!-- //通过插槽用户可以修改组件的内容 -->
      <slot>按钮</slot>
  </div>
</template>

<script>
export default {
    props:{
        //父组件转过来的变量
        //接收父组件传过来的type
type:String
    },
methods: {
    //在子组件做点击用来传过去给父组件做点击事件
   btn(e){
       this.$emit('click',e)
   }
}
}
</script>

<style lang='less' scoped>
.btn {
  width: 318px;
  height: 48px;
  border-radius: 24px;
  background-color: #ccc;
  color: #666;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  margin: 20px auto;
}
.primary{
    background-color: green;
    color: #fff;
}
.danger{
     background-color: red;
    color: #fff;
}

</style>